<template>

    <div class="index">

        <el-container class="container">
            <el-header>
                <TopHeader @getinfo="getinfos" :info="info"></TopHeader>
            </el-header>
            <el-header>
                <MenuHeader :data="menudata" @select="selectMenu"></MenuHeader>
            </el-header>
            <el-container>
                <!--                     v-if="$route.path !== '/front' && $route.path !== '/sysgl' && $route.path !== '/syssbgl' && $route.path !== '/sbsysq'" -->
                <el-aside width="200px" v-if="$route.path !== '/front' && info.role == 0">
                    <LeftMenu :data="leftmenudata"></LeftMenu>

                </el-aside>
                <el-main style="background: #f8f8ff;">

                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>


    </div>
</template>
<script setup>
import TopHeader from '@/components/TopHeader.vue';
import MenuHeader from '@/components/MenuHeader.vue';
import LeftMenu from '@/components/LeftMenu.vue';
import { onMounted, ref } from 'vue';
import service from '@/request/Request';
import { useRoute } from 'vue-router';
const route = useRoute();
const menudata = ref([

])
const leftmenudata = ref([])
const selectMenu = (e) => {
    console.log(e)
    if (e == '/laboratory' || e == '/device' || e == '/adminsbsysq') {
        leftmenudata.value = [{
            path: "/laboratory",
            name: "实验室信息"
        },
        {
            path: "/device",
            name: "实验室设备信息"
        },
        {
            path: "/adminsbsysq",
            name: "设备使用申请"
        },
        {
            path: "/adminsbwxsq",
            name: "设备维修申请"
        },
        ]
    }
    if (e == '/user' || e == '/yhxx') {
        leftmenudata.value = [{
            path: "/user",
            name: "管理员信息"
        },
        {
            path: "/yhxx",
            name: "教师信息"
        },
        ]
    }
}
const getinfos = () => {
    getinfo()
}
const getinfo = async () => {
    const res = await service.get("/info");
    console.log(res)
    info.value = res.data
    if (info.value.role == 0) {
        menudata.value = [
            {
                path: "/front",
                name: "首页"
            },
            {
                path: "/laboratory",
                name: "信息管理"
            },
            {
                path: "/user",
                name: "用户管理"
            },
        ]
    } else if (info.value.role == 2) {
        menudata.value = [
            {
                path: "/sysgl",
                name: "实验室管理"
            },
            {
                path: "/syssbgl",
                name: "实验室设备管理"
            },
            {
                path: "/sbsysq",
                name: "设备使用申请"
            },
            {
                path: "/sbwxsq",
                name: "设备维修申请"
            },
        ]
    } else if (info.value.role == 1) {
        menudata.value = [
            {
                path: "/labAdminLab",
                name: "实验室管理"
            },
            {
                path: "/labAdminEquipment",
                name: "实验室设备管理"
            },
            {
                path: "/labadminsbsysq",
                name: "设备使用申请"
            },
            {
                path: "/labadminsbwxsq",
                name: "设备维修申请"
            },

        ]
    }
}
const info = ref({});
onMounted(() => {

    selectMenu(route.path)
    // console.log($route.path)
    getinfo()
})
</script>
<style scoped>
.index {
    width: 100%;
    height: 100%;
}
</style>
<style>
.el-header {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
</style>